<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<% pageContext.setAttribute("newLineChar", "\n"); %>
<!DOCTYPE html>
<html lang="ko">
	<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
    <title>Faeple on ${member.name}(${member.id})</title>
    <!--[if lt IE 9]>
    	<script type="text/javascript" src="/resources/js/html5shiv.js"></script>
		<script type="text/javascript" src="/resources/js/respond.min.js"></script>
		<link rel='stylesheet' href='/resources/css/layout/memberView_pc.css' />
    <![endif]-->
    <!--[if lt IE 10]>
    	<script src="/resources/js/placeholders.min.js"></script>
    <![endif]-->
	<link rel="stylesheet" href="/resources/css/jquery.minicolors.css">
	<link rel="stylesheet" href="/resources/css/postModal.css?20150424.css">
	<link rel="stylesheet" href="/resources/css/postbox.css?20150414">
	<link rel="stylesheet" href="/resources/css/layout/memberView_pc.css?20150514" />
    <style type="text/css">
    	body { background-image: none!important;background-color: #eee!important;}
		.profile-nav li:focus,
		.profile-nav li:hover{
			border-bottom: 4px solid rgba(255, 255, 255, 0.6);
		}
		.profile-nav .active{
			border-bottom: 4px solid rgba(255, 255, 255, 0.6);
		}
		.share-list > li{
			padding: 0;
		}
		.coverImageWrapper{
			background-color: ${member.layoutColor};
		}
		#post-cover { 
			width: 100%; min-height:450px; background-color: #000; opacity:0; display: none; margin:0 auto;
			-webkit-transition:opacity 0.5s ease-in-out;
			-moz-transition:opacity 0.5s ease-in-out;
			-o-transition:opacity 0.5s ease-in-out;
			transition:opacity 0.5s ease-in-out;
		}
		#post-cover > .item { width: 234px; margin-bottom:1px; border-radius:0; box-shadow:none; }
		#post-cover > .item > a { width:234px; display: block; }
		#post-cover img { width: 100%; height: auto; }
		.item { 
			border-radius:0!important;
			opacity: 1;
			-webkit-transition: opacity 1s ease-in-out;
			-moz-transition: opacity 1s ease-in-out;
			-o-transition: opacity 1s ease-in-out;
			transition: opacity 1s ease-in-out;
		}
		.item .item-image > a { background-color:rgba(0,0,0,.1); border: 1px solid #efefef; }
		.item-image > a > img { border-radius:0!important; }
		.item .item-image { padding: 6px; }
		.item .item-info > p{ text-shadow:0 1px 0 rgba(255,255,255,.8); }
		.item .item-info{
			padding-top: 5px;
			padding-left: 0!important;
			padding-right: 0!important;
			padding-bottom: 0!important;
		}
		.fnBtn{
			position: absolute;
			border: 1px solid #fff;
			border-radius: 20px;
			background: transparent;
			color: #fff;
			-webkit-transition:all 0.2s ease-in-out;
			-moz-transition:all 0.2s ease-in-out;
			-o-transition:all 0.2s ease-in-out;
			transition:all 0.2s ease-in-out;
		}
		.fnBtn:hover{
			background: #43A8F0;
			border-color: #0487E4;
		}
		button.active{
			background: #58B858!important;
			border-color: #52AE52!important;
		}
		.item-hide{
			opacity: 0;
		}
		.title-h4{
			font-weight: bold;
			color: #3A404C;
			text-shadow: 0 1px 1px rgba(255,255,255,.8);
			-webkit-text-shadow: 0 1px 1px rgba(255,255,255,.8);
			-moz-text-shadow: 0 1px 1px rgba(255,255,255,.8);
		}
		.sns-link-btn{
			position: absolute;
/* 			border: 1px solid #fff; */
			border-radius: 50%;
			color: #fff!important;
			display: block;
			width: 35px;
			height: 35px;
			font-size: 22px;
			-webkit-transition:all 0.2s ease-in-out;
			-moz-transition:all 0.2s ease-in-out;
			-o-transition:all 0.2s ease-in-out;
			transition:all 0.2s ease-in-out;
		}
		.sns-link-btn:hover{
			color: #575757!important;
		}
		.profile-cover{
			position: absolute;
			top: -75%;
		
   filter: profile-cover-blur(6px); 
  -webkit-filter: profile-cover-blur(6px); 
  -moz-filter: profile-cover-blur(6px);
  -o-filter: profile-cover-blur(6px);
  filter:url(#profile-cover-blur);
  width: 100%;
  -webkit-filter: url(#f1);  
  filter: url(#f1);
  z-index: 1;
		}
		.gray-gradient{
			  background-color: #000\9;
  filter: alpha(opacity=50)\9;
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .7));
  background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .7) 100%);
    position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
		}
		.color-gradient{
/* 		    background: -webkit-linear-gradient(left, rgba(73, 198, 140, .6), rgba(76, 165, 229, .6)); */
  background: linear-gradient(90deg, rgba(215, 215, 215, 0.72), rgba(200, 200, 200, 0.72));
    position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
		}
		.post-c{
		position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: #d7d7da;
		}
    </style>
</head>

<body>
<div id="viewport">
<div id="page">
<!-- header -->
	<jsp:include page = "head.jsp" flush="false"/>
<!-- header -->
<div class="mobile-more-btn">
<a data-target="#" href="#" data-toggle="dropdown" style="padding: 8px 12px; font-size: 25px; color: #fff; display: block;"><i class="ion-ios-more-outline"></i></a>
<ul class="dropdown-menu" style="border-color: #ddd; z-index: 1010; right: 0; left:inherit; min-width: 180px;">
	<c:if test="${follow ne 'me'}">
		<li><a href="javascript:loadMessage();" title="<spring:message code="head.message"/>"><i class="ion-ios-chatbubble-outline" style="font-size:18px;"></i><spring:message code="head.message"/></a></li>
	</c:if>
	<li><a href="#" data-toggle="modal" data-target="#page-share-modal" title="<spring:message code="common.share"/>"><i class="icon ion-share" style="font-size:20px;"></i><spring:message code="common.share"/></a></li>
	<c:if test="${follow eq 'me'}">
		<li><a href="/settings#profile" title="<spring:message code="profile.edit"/>"><i class="icon ion-gear-a" style="font-size:20px;"></i><spring:message code="profile.edit"/></a></li>
	</c:if>
</ul>
</div>
<!-- <div style="position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.85);">

</div> -->
<form id="update-form" method="post" enctype="multipart/form-data" action="/profileUpdate">
	<div style="width:100%;height:auto;min-height:350px;overflow:hidden;position:relative;margin-top:-50px;padding-top:50px;padding-bottom:75px;">
		<%-- <div class="container" style="padding:0;position: relative;overflow:hidden;">
			<div class="coverImageWrapper">
				<c:choose>
				<c:when test="${member.coverImage ne null && member.coverImage ne ''}"><img id="coverImage" style="position: absolute; width: 100%; height: auto;" src="/resources/upload/cover/${member.coverImage}"></c:when>
				<c:otherwise><img id="coverImage" style="position: absolute; width: 100%; height: auto;" src=""></c:otherwise>
				</c:choose>
				<c:if test="${follow eq 'me'}">
					<span class="coverImageUploadMessage fp-update"><i class="fa fa-camera fa-2x"></i><br><spring:message code="profile.add_cover"/></span>
					<button id="coverImageDelete" type="button" class="image-delete-btn" style="" title="<spring:message code="profile.remove_cover"/>"><i class="ion-close-round"></i></button>
					<input type="file" id="upLoadCoverImage" class="fp-update" name="upLoadCoverImage" onchange="profileImageUpload(this, 'cover')" accept="image/*">
					<img id="movie-upLoadCoverImage" class="fp-update" src="">
				</c:if>
				<div class="mobile-display-website"><a href="${member.website}" target="_blank">${member.website}</a></div>
				<c:if test="${member.follow_accept != 0}">
					<c:if test="${follow eq 'following'}">
						<button type="button" class="mobile-follow-btn" style="display: none;" data-state="following" onclick="follow(this, 'mobile')"><i class="fa fa-check"></i>&nbsp;<i class="glyphicon glyphicon-user"></i></button>
					</c:if>
					<c:if test="${follow eq 'unFollow'}">
						<button type="button" class="mobile-follow-btn" style="display: none;" data-state="follow" onclick="follow(this, 'mobile')"><i class="fa fa-plus"></i>&nbsp;<i class="glyphicon glyphicon-user"></i></button>
					</c:if>
				</c:if>
				<div id="coverUploadMessage" class="popover top" style="display: none;position: absolute;top:70px;left:50%; z-index:120; max-width:300px; margin-left:-150px;"><div class="arrow"></div><h3 class="popover-title" style="display: none;"></h3><div style="padding:9px 14px;"><spring:message code="profile.move_cover"/></div></div>
			</div>
			<div style="position:absolute;top:0;width:100%;z-index:999;"><div id="post-cover"></div></div>
		</div> --%>
<!-- 		<div id="post-cover-wrap" style="position:absolute;top:0;width:100%;"><div id="post-cover"></div></div> -->
		<div class="post-c" style="z-index: -1;">
			<img src="/resources/upload/profile/thumbnail/${member.profileImage}" class="profile-cover">
			<div class="gray-gradient"></div>
			<div class="color-gradient"></div>
		</div>
		
<!-- 		<div class="color-gradient"></div> -->
		<div class="container" style="text-align: center;padding-top: 40px;position:relative;z-index:3;">
			<img src="/resources/upload/profile/thumbnail/${member.profileImage}" style="width:120px;height:120px;border:4px solid #fff;border-radius:50%;box-shadow:0 1px 1px rgba(0, 0, 0, 0.3);">
			<h2 style="margin-top:10px;text-shadow:1px 1px 1px rgba(226, 226, 226, 0.41);">${member.name}</h2>
			<p>${member.description}</p>
			<c:if test="${member.website ne null || not empty member.website}">
				<a target="_blank" href="${member.website}" style="color:#000!important;">${member.website}</a>
			</c:if>
			<c:if test="${follow ne 'me'}">
				<c:if test="${member.follow_accept != 0}">
					<c:if test="${follow eq 'following'}">
						<button type="button" id="followBtn" style="top:15px;right:90px;height:30px;width:75px;" class="fnBtn active" data-state="following" onclick="follow(this, 'pc')" title="<spring:message code="common.following"/>"><spring:message code="common.following"/></button>
					</c:if>
					<c:if test="${follow eq 'unFollow'}">
						<button type="button" id="followBtn" style="top:15px;right:90px;height:30px;width:75px;" class="fnBtn" data-state="follow" onclick="follow(this, 'pc')" title="<spring:message code="common.follow"/>"><spring:message code="common.follow"/></button>
					</c:if>
				</c:if>
				<c:if test="${member.follow_accept == 0}">
					<button id="followBtn" class="fnBtn" style="top:15px;right:90px;height:30px;width:75px;" title="<spring:message code="common.follow"/>"><spring:message code="common.follow"/></button>
				</c:if>
				<button type="button" class="fnBtn" onclick="loadMessage();" title="<spring:message code="head.message"/>" style="top:15px;right:45px;height:30px;width:38px;overflow:hidden;"><i class="ion-ios-email" style="font-size:19px; position:absolute;top:0;left:11px;"></i></button>
			</c:if>
			<button type="button" class="fnBtn" data-toggle="modal" data-target="#page-share-modal" title="<spring:message code="common.share"/>" style="top:15px;right:0px;height:30px;width:38px;overflow:hidden;"><i class="icon ion-share" style="font-size:18px; position:absolute;top:0;left:13px;"></i></button>
<!-- 			<button type="button" class="fnBtn" onclick="loadMessage();" title="" style="top:15px;left:50px;height:30px;width:38px;overflow:hidden;"><i class="ion-link" style="font-size:19px; position:absolute;top:0;left:12px;"></i></button> -->
			<c:if test="${!empty member.link_facebook and member.link_facebook ne null}">
				<a class="sns-link-btn" href="http://facebook.com/${member.link_facebook}" target="_blank" style="top:15px;left:0px;"><i class="ion-social-facebook"></i></a>
			</c:if>
			<c:if test="${!empty member.link_instagram and member.link_instagram ne null}">
				<a class="sns-link-btn" href="http://instagram.com/${member.link_instagram}" target="_blank" style="top:15px;left:40px;"><i class="ion-social-instagram-outline"></i></a>
			</c:if>
			<c:if test="${!empty member.link_twitter and member.link_twitter ne null}">
				<a class="sns-link-btn" href="http://twitter.com/${member.link_twitter}" target="_blank" style="top:15px;left:80px;"><i class="ion-social-twitter"></i></a>
			</c:if>
		</div>
		<div class="clearfix"></div>
	</div>
	
	<%-- <div class="container profileWrapper">
		<div id="profile-info">
			<div class="profile-image-wrapper" title="${member.name}" data-toggle="tooltip" style="cursor: pointer;">
				<c:if test="${follow eq 'me'}">
				<input type="file" id="upLoadProfileImage" class="fp-update" name="upLoadProfileImage" onchange="profileImageUpload(this, 'profile')" accept="image/*">
				<span class="profileImageUploadMessage fp-update"><i class="fa fa-camera" style="font-size: 28px;"></i><br><spring:message code="profile.add_profile"/></span>
				<button id="profileImageDelete" class="image-delete-btn" type="button" title="프로필이미지 삭제"><i class="ion-close-round"></i></button>
				</c:if>
				<a href="/resources/upload/profile/${member.profileImage}" rel="gallery" id="profile-imageViewer">
					<c:set value="${member.profileImage_top}px" var="top2"/>
					<img id="movie-upLoadProfileImage" class="fp-update" style="width: 170px; height: auto;" src="">
					<img id="profileImage" src="/resources/upload/profile/thumbnail/${member.profileImage}" alt="${member.name}" style="top:${top2};">
				</a>
			</div>
			<div class="profile-name-wrapper fp-display">
				<p><a href="/${member.id}" id="print_name">${member.name}</a><small><a href="/${member.id}" style="color:#fff;display:none;">@${member.id}</a></small></p>
				<p id="print_description">${member.description}</p>
			</div>
			<div class="fp-display">
				<div class="fp-button">
					<c:if test="${follow ne 'me'}">
						<c:if test="${member.follow_accept != 0}">
							<c:if test="${follow eq 'following'}">
								<button type="button" class="btn btn-success btn-sm" id="followBtn" data-state="following" onclick="follow(this, 'pc')" title="<spring:message code="common.following"/>" style="width:80px;"><i class='fa fa-check'></i>&nbsp;<spring:message code="common.following"/></button>
							</c:if>
							<c:if test="${follow eq 'unFollow'}">
								<button type="button" class="btn btn-primary btn-sm" id="followBtn" data-state="follow" onclick="follow(this, 'pc')" title="<spring:message code="common.follow"/>" style="width:80px;"><spring:message code="common.follow"/></button>
							</c:if>
						</c:if>
						<c:if test="${member.follow_accept == 0}">
							<div title="팔로우를 받지 않는 사용자입니다" data-toggle="tooltip" style="float: left; margin-right: 5px;"><button type="button" class="btn btn-primary btn-sm" id="followBtn" disabled="disabled" style="width:80px;"><spring:message code="common.follow"/></button></div>
						</c:if>
						<button type="button" id="message-btn" class="btn btn-default btn-sm" style="width:33px;" onclick="loadMessage()" title="<spring:message code="head.message"/>"><i class="icon ion-email" style="left:9px;"></i></button>
					</c:if>
					<button type="button" id="page-share-btn" class="btn btn-default btn-sm" style="width:33px;" data-toggle="modal" data-target="#page-share-modal" title="<spring:message code="common.share"/>"><i class="icon ion-share"></i></button>
				</div>
				<p class="print-location"><i class="fa fa-map-marker" style="color: #4E5665; font-size:15px; margin-right: 6px;"></i><span id="print_location">${member.location}<c:if test="${not empty member.location}">, </c:if></span>${member.country}</p>
				<p id="print_website"></p>
				<ul class="link-sns">
				<c:if test="${!empty member.link_facebook and member.link_facebook ne null}">
					<li><a href="http://facebook.com/${member.link_facebook}" title="Facebook" target="_blank"><img src="/resources/img/icon/share-facebook-icon.png">&nbsp;Facebook</a></li>
				</c:if>
				<c:if test="${!empty member.link_instagram and member.link_instagram ne null}">
					<li><a href="http://instagram.com/${member.link_instagram}" title="Instagram" target="_blank"><img src="/resources/img/instagram-icon.png">&nbsp;Instagram</a></li>
				</c:if>
				<c:if test="${!empty member.link_twitter and member.link_twitter ne null}">
					<li><a href="http://twitter.com/${member.link_twitter}" title="Twitter" target="_blank"><img src="/resources/img/icon/share-twitter-icon.png">&nbsp;Twitter</a></li>
				</c:if>
				</ul>
			</div>
			<c:if test="${follow eq 'me'}">
			<div class="fp-update fp-update-input">
				<input type="text" id="inputName" name="inputName" class="form-control" value="${member.name}" placeholder="<spring:message code="profile.name"/>" maxlength="20">
				<textarea id="inputDescription" name="inputDescription" rows="4" class="form-control" placeholder="<spring:message code="profile.description"/>" maxlength="100">${member.description}</textarea>
				<input type="text" id="inputLocation" name="inputLocation" class="form-control" value="${member.location}" placeholder="<spring:message code="profile.location"/>" maxlength="20">			
				<input type="text" id="inputWebsite" name="inputWebsite" class="form-control" value="${member.website}" placeholder="<spring:message code="profile.web"/>" maxlength="40">
				<div style="width:100%; height: 45px;" title="<spring:message code="profile.layout_color"/>">
					<span style="position: absolute; left:5px; padding-top: 5px; z-index: 2; color: #fff;pointer-events:none;"><spring:message code="profile.layout_color"/></span>
					<input type="hidden" id="inputLayoutColor" name="inputLayoutColor" class="form-control" value="${member.layoutColor}" maxlength="7">
				</div>
				<input type="hidden" id="inputCoverImage_top" name="inputCoverImage_top" value="${member.coverImage_top}">
				<input type="hidden" id="inputprofileImage_top" name="inputprofileImage_top" value="${member.profileImage_top}">
				<input type="hidden" id="delCoverImage" name="delCoverImage" value="false">
				<input type="hidden" id="delProfileImage" name="delProfileImage" value="false">
			</div>
			</c:if>
		</div>
	</div> --%>
</form>
<input type="hidden" id="hasProfileImage" name="hasProfileImage" value="">
<input type="hidden" id="prevColor" name="prevColor" value="${member.layoutColor}">
<div class="profile-header">
	<ul class="profile-nav" id="menu-nav">
		<li title="${postCnt} <spring:message code="profile.post"/>" class="active">
			<a href="#" onclick="menuToggle(this, 'post')" data-target="history">
				<span class="profile-value">${postCnt}</span>
				<span class="profile-nav-title"><spring:message code="profile.post"/></span>
			</a>
			<div style="width:2px;background:transparent;height:100%;"></div>
		</li>
		<li title=" ${followingCnt} <spring:message code="profile.following"/>">
			<a href="#" onclick="menuToggle(this, 'following')" data-target="history">
				<span class="profile-value">${followingCnt}</span>
				<span class="profile-nav-title"><spring:message code="profile.following"/></span>
			</a>
		</li>
		<li title="${followerCnt} <spring:message code="profile.followers"/>">
			<a href="#" onclick="menuToggle(this, 'follower')" data-target="history">
				<span class="profile-value" id="follower_cnt">${followerCnt}</span>
				<span class="profile-nav-title"><spring:message code="profile.followers"/></span>
			</a>
		</li>
		<li title="${likeCnt} <spring:message code="profile.favorites"/>">
			<a href="#" onclick="menuToggle(this, 'like')" data-target="history">
				<span class="profile-value">${likeCnt}</span>
				<span class="profile-nav-title"><spring:message code="profile.favorites"/></span>
			</a>
		</li>
	</ul>
	<c:if test="${follow eq 'me'}">
	<ul class="profile-config" style="display: none;">
		<li class="fp-display"><button type="button" class="btn btn-default" onclick="profile_update()" title="<spring:message code="profile.edit"/>"><i class='fa fa-cog' style="color: #575757;"></i>&nbsp;<spring:message code="profile.edit"/></button></li>
		<li class="fp-update" style="display: none;">
			<button type="button" class="btn btn-success" onclick="profile_save(this)" title="<spring:message code="profile.save"/>"><spring:message code="profile.save"/></button>
			<button type="button" class="btn btn-default" onclick="profile_cancel()" title="<spring:message code="profile.cancel"/>"><spring:message code="profile.cancel"/></button>
		</li>
	</ul>
	</c:if>
</div>
<div class="container profile-content">
	<div class="content-wrapper">
		<div id="itemList"></div>
		<div id="followingList"></div>
		<div id="followerList"></div>
		<div id="likeList" style="padding:35px 0;"></div>
	</div>
</div>

<div id="profile-update-overlay" style="width: 100%; height: 100%; position: fixed; background-color: #fff; top:0; z-index: 10; opacity: .8; -ms-filter: 'alpha(opacity=80)'; display: none; "></div>
<!-- share dialog -->
<div class="modal fade" id="share-modal" tabindex="-1" role="dialog" aria-hidden="true" style="z-index: 1060;">
	<div class="modal-dialog" style="max-width: 350px;">
		<div class="modal-content">
			<form id="report_form" method="post">
			<input type="hidden" id="report-category" name="report-category">
			<div class="modal-header" style="border-bottom:0;padding-bottom:0;">
		        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="font-size: 28px;">×</button>
		        <h4><spring:message code="common.share"/></h4>
			</div>
			<div class="modal-body">
				<p>공유할 사이트를 선택 :</p> 
				<ul class="list-inline share-list">
					<li><a href="javascript:fb_share();" title="페이스북으로 공유하기" style="display: block;"><img src="/resources/img/icon/share-facebook-icon.png" width="32px" height="32px"></a></li>
					<li><a href="javascript:twitter_share();" title="트위터로 공유하기" style="display: block;"><img src="/resources/img/icon/share-twitter-icon.png" width="32px" height="32px"></a></li>
					<li><a id="google-share" title="구글플러스로 공유하기" href="" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" style="display: block;"><img src="/resources/img/icon/share-googleplus-icon.png" width="32px" height="32px"></a></li>
					<li><a id="mail-share" href="" target="_blank" title="이메일로 공유하기"><img src="/resources/img/icon/share-email-icon.png" width="32px" height="32px"></a>
					<li><a id="kakao-link-btn" href="javascript:;" title="카카오로 공유하기" style="display: none;"><img width="34px;" height="34px;" src="http://dn.api1.kage.kakao.co.kr/14/dn/btqa9B90G1b/GESkkYjKCwJdYOkLvIBKZ0/o.jpg" style="margin-left:2px;" /></a></li>
				</ul>
				<div>
					<p>또는 포스트 링크 복사</p>
					<input type="text" id="input_urlCopy" class="form-control" readonly="readonly" value="" onclick="this.select();" style="background-color: #fff; cursor: text;">
				</div>
			</div>
			</form>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- share dialog -->
<!-- report dialog -->
<div class="modal fade" id="report-modal" tabindex="-1" role="dialog" aria-hidden="true" style="z-index:1100;">
	<div class="modal-dialog" style="max-width: 350px;">
		<div class="modal-content">
			<form id="report-form" method="post">
			<input type="hidden" id="report-idx" name="report-idx">
			<input type="hidden" id="report-type" name="report-type">
			<div class="modal-header" style="border-bottom:0;padding-bottom:0;">
		        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="font-size: 28px;">×</button>
		        <h4 class="modal-title">신고하기</h4>
			</div>
			<div class="modal-body">
				<div class="form-group">
					<label for="report-reason">이 게시물을 신고하는 이유가 무엇인가요?</label>
					<select class="selectpicker show-tick" id="report-reason" name="report-reason" title="선택" data-width="100%">
						<option value="spam">스팸 및 광고</option>
						<option value="improper">부적절한 주제</option>
						<option value="steal">도용 및 저작권 침해</option>
						<option value="speech">욕설 및 불편한 언어</option>
						<option value="porno">음란성</option>
						<option value="other">기타</option>
					</select>
				</div>
				<div class="form-group">
					<label for="report-opinion">추가의견</label>
					<textarea id="report-opinion" name="report-opinion" class="form-control" rows="3" cols="250" maxlength="200" style="resize:none;"></textarea>
				</div>
			</div>
			<div class="modal-footer" style="border-top:0;margin-top:0;padding:0 15px 15px 15px;">
				<button type="button" class="btn btn-primary btn-lg btn-block" onclick="report_submit(this);">보내기</button>
			</div>
			</form>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- report dialog -->
<!-- message modal -->
<div class="modal fade" id="message-modal" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog" style="max-width: 550px;">
		<div class="modal-content">
			<form id="message-form" method="post">
			<input type="hidden" id="member_two" name="member_two" value="${member.idx}">
			<input type="hidden" id="send" name="send" value="new">
			<div class="modal-header" style="border-bottom:0;padding-bottom:0;">
		        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="font-size: 28px;">×</button>
		        <h4 class="modal-title">메시지</h4>
			</div>
			<div class="modal-body">
				<div class="form-group">
					<label>받는사람</label>
					<p class="form-control-static">${member.id}</p>
				</div>
				<div class="form-group">
					<label for="reply">내용</label><span id="reply-length" style="margin-left:15px; font-size: 12px; color: #ccc;">0</span><span style="font-size: 12px; color: #ccc;">/1000</span>
					<textarea id="reply" name="reply" class="form-control" rows="4" maxlength="1000" style="resize:vertical;" onkeyup="remainMessage()"></textarea>
				</div>
			</div>
			<div class="modal-footer" style="border-top:0;margin-top:0;padding:0 15px 15px 15px;">
				<button type="button" class="btn btn-success" onclick="sendMessage()">전송</button>
			</div>
			</form>
		</div>
	</div>
</div>
<!-- message modal -->
<!-- page share modal -->
<div class="modal fade" id="page-share-modal" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog" style="max-width: 350px;">
		<div class="modal-content">
			<form id="report_form" method="post">
			<input type="hidden" id="report-category" name="report-category">
			<div class="modal-header" style="border-bottom:0;padding-bottom:0;">
		        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="font-size: 28px;">×</button>
		        <h4>공유하기</h4>
			</div>
			<div class="modal-body">
				<p>공유할 사이트를 선택 :</p> 
				<ul class="list-inline share-list">
					<li onclick="fb_page_share()" title="페이스북으로 공유하기" style="cursor: pointer;"><img src="/resources/img/icon/share-facebook-icon.png" width="32px" height="32px"></li>
					<li onclick="javascript:window.open('https://twitter.com/intent/tweet?text=View on %23Faeple http://faeple.com/${member.id}','트위터로 공유하기', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=260,width=600');" title="트위터로 공유하기" style="cursor: pointer;"><img src="/resources/img/icon/share-twitter-icon.png" width="32px" height="32px"></li>
					<li><a title="구글플러스로 공유하기" href="https://plus.google.com/share?url=http://faeple.com/${member.id}" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" style="display: block;"><img src="/resources/img/icon/share-googleplus-icon.png" width="32px" height="32px"></a></li>
					<li><a href="mailto:?subject=View on Faple - ${member.name}&body=http://faeple.com/${member.id}" target="_blank" title="이메일로 공유하기"><img src="/resources/img/icon/share-email-icon.png" width="32px" height="32px"></a>
				</ul>
				<div>
					<p>또는 페이지 링크 복사</p>
					<input type="text" class="form-control" readonly="readonly" value="http://faeple.com/${member.id}" onclick="this.select();" style="background-color: #fff; cursor: text;">
				</div>
			</div>
			</form>
		</div>
	</div>
</div>
<svg style="display:none;">
  <filter id="f1" width="100%" height="100%">
    <feGaussianBlur stdDeviation="25"/>
  </filter>
</svg>
<!-- page share modal -->
<input type="hidden" id="share-url">
<input type="hidden" id="share-title">
<input type="hidden" id="share-image1">
<input type="hidden" id="share-content">
</div><!-- end page -->
<%@ include file="commonScript.jsp" %>
</div><!-- end viewport -->
<script src="/resources/js/jquery.minicolors.min.js"></script>
<script src="/resources/js/jquery.form.js"></script>
<script src="/resources/js/modernizr.custom.js"></script>
<script src="/resources/js/masonry.pkgd.min.js"></script>
<script src="/resources/js/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript">
    var postIndex = 0;
    var followingIndex = 0;
    var followerIndex = 0;
    var likeIndex = 0;
    var scroll = false;
    
    var postHasPost = true;
    var followingHasPost = true;
    var followerHasPost = true;
    var likeHasPost = true;
    
    var profile_top;
    var is_mobile = isMobile();
    var loading = true;
    var postList;
    var coverMaxHeight = 100;
    var curr_loadingType = "post";
    
    var member_idx = "${userDto.idx}";
	var member_id = "${userDto.id}";
	var member_name = "${userDto.name}";
	var member_profile = "${userDto.profileImage}";
    
    var dt = new Date();
	var currentMonth = dt.getMonth()+1;
    var groupItem = true;
    var onestep = true;
    
    function getMyPost() {
    	curr_loadingType = "post";
    	$("#followingList").hide();
    	$("#followerList").hide();
    	$("#likeList").hide();
		$("#itemList").show();
    	if($("#itemList").is(":empty") || postHasPost){
    		loading = false;
    		var data = "index=" + postIndex + "&member_idx=${member.idx}";
            $.ajax({
                type: "get",
                url: "/getMyPost",
                data: data,
                dataType: "json",
                timeout: 5000,
                error: function () {
                    $("#itemList").append("<div style='text-align:center;'><p><i class='glyphicon glyphicon-remove' style='font-size:44px; color: #a2a2a2; text-shadow: 1px 1px 0px rgba(201,201,201,1);'></i><h5>서버문제로 게시글을 불러올 수 없습니다</h5><button onclick='location.reload(true)' class='btn btn-default btn-sm'>다시시도</button></div>");
                },
                success: function (response) {
                    if (response == "" && postIndex == 0) {
                        if (member_idx == "${member.idx}") {
                            $("#itemList").html("<div style='text-align:center; padding:30px 0;'><i class='ion-images' style='font-size:50px; color: #7a7a7a;'></i><h4 class='title-h4'>회원님의 포스트</h4><h5 style='margin-top:25px;color:#999; text-shadow:0 1px 1px rgba(255,255,255,.8);font-weight:bold;'>이곳은 회원님의 포스트가 표시되는 공간입니다.<br>새로운 게시물을 작성해보세요</h5><button type='button' class='btn btn-primary' data-toggle='modal' data-target='#write-dialog' data-backdrop='static'>게시물 작성하기</button></div>");
                        } else {
                            $("#itemList").html("<div style='text-align:center; padding:30px 0;'><p><i class='fa fa-search-minus' style='font-size:45px; color: #7a7a7a;'></i></p><h4 class='title-h4'>${member.name}님은 아직 등록한 포스트가 없습니다.</h4></div>");
                        }
                        postHasPost = false;
                    } else {
                        if (response != "") {
                        	if(response.length < 20){
                        		postHasPost = false;
                            }
    						var html = "<div class='grid-sizer'></div>";
    						for (var i = 0; i < response.length; i++) {
    							var upLoadDate = new Date(response[i].create_date.substring(0, 4), response[i].create_date.substring(5, 7)-1, response[i].create_date.substring(8, 10), response[i].create_date.substring(11, 13), response[i].create_date.substring(14, 16), 00);
    							var upLoadMonth = upLoadDate.getMonth()+1;
                                if(upLoadMonth == currentMonth){
                                	if(groupItem){
                                		html += "<div class='itembox item-sort'><span>최근 1개월</span></div>";
                                		groupItem=false;
                                	}
                                }else{
                                	if(groupItem){
                                		html += "<div class='itembox item-sort'><span>"+upLoadMonth+"월 "+upLoadDate.getFullYear()+"</span></div>";
                                		groupItem=false;
                                	}
                                }
                                if(i > 0){
                                	var prevMonth = new Date(response[i-1].create_date.substring(0, 4), response[i-1].create_date.substring(5, 7)-1, response[i-1].create_date.substring(8, 10), response[i-1].create_date.substring(11, 13), response[i-1].create_date.substring(14, 16), 00);
                                	if(upLoadMonth != prevMonth.getMonth()+1){
                                		html += "<div class='itembox item-sort'><span>"+upLoadMonth+"월 "+upLoadDate.getFullYear()+"</span></div>";
                                	}
                                }
                                var likeBtnStyle = "";
                                if(response[i].likeState == "like"){ likeBtnStyle = "style='color: #cc2e35;'"; }
                                html += "<div class='itembox' data-idx='"+response[i].idx+"'><div class='item'><div class='item-image'><div class='item-function'><button type='button' class='likeBtn' title='좋아요' onclick='like(this,"+response[i].idx+","+response[i].member_idx+",\""+response[i].image1+"\",\""+response[i].url+"\", \""+response[i].member_id+"\")'><i class='fa fa-heart' "+likeBtnStyle+"></i></button><button type='button' title='공유하기' onclick='post_share(\""+shareParse(response[i].content)+"\", \""+shareParse(response[i].title)+"\", \""+response[i].image1+"\", \""+response[i].url+"\");'><i class='fa fa-share'></i></button></div><a href='/p/"+response[i].url+"' data-target='post' style='display: block;'><img src='/resources/upload/post/thumbnail/"+response[i].image1+"'></a></div><div class='item-info'><p style='text-align:center;'><i class='fa fa-heart'></i>&nbsp;<span class='like_cnt'>"+response[i].like_cnt+"</span><i class='fa fa-comment'></i>&nbsp;<span class='comment_cnt'>"+response[i].comment_cnt+"</span></p></div><div class='clearfix'></div></div></div>";
     			    			//html += "<div class='item-content'>"+parseContent(response[i].content.parseEmoji())+"</div>";
     			    			
     			    			/* if(response[i].comment_cnt != "0"){
    		    					html += "<div style='width: 93%; margin: 8px auto; border-bottom :1px solid #f3f3f3;'></div><div class='comment-list'>";
    		    					for(var k=0;k<response[i].comment.length;k++){
    		    						html += "<div class='comment'><div title='"+response[i].comment[k].author+"' class='comment-profile'><a href='/"+response[i].comment[k].member_id+"'><img src='/resources/upload/profile/thumbnail/"+response[i].comment[k].profileImage+"'></a></div><div class='comment-right' title='"+response[i].comment[k].create_date+"'><div class='comment-author'><a href='/"+response[i].comment[k].member_id+"'>"+response[i].comment[k].author+"</a></div><div class='comment-content'>"+parseContent(response[i].comment[k].content).parseEmoji()+"</div></div></div>";
    		    					}
    		    					html += "</div>";
    		    				} */
                                //groupMonth = upLoadDate.getMonth();
                            }
                            var $el = $(html);
                            if(postIndex==0){
     			    			$el.imagesLoaded(function(){
     			    				postList.append($el).masonry({
     			    					itemSelector: '.itembox',
    		   	                		"gutter": 15,
    		   	                		columnWidth: '.grid-sizer',
    		   	                		transitionDuration : 0
    	 			    			});
     			    				//isLoading = true;
     			    			});
     			    			
     			    		}else{
     			    			$el.imagesLoaded(function(){
     			    				postList.append($el).masonry('appended', $el);
     			    				//isLoading = true;
    	 			    		});
     			    		}
                        }else{
                        	postHasPost = false;
                        }
                    }
                },
                beforeSend: function () {
                	$("#ajax-spinner").show();
                },
                complete: function () {
                	$("#ajax-spinner").hide();
    		    	loading = true;
    		    	scroll = false;
                }
            });
    	}
    }
	    
    function follow(obj, app) {
        if(member_idx == ""){
            $("#login-dialog").modal("show");
        }else{
        	var type = $(obj).data("state");
            var data = "following_idx=" + "${member.idx}";
            if(type == "follow"){
            	$(obj).html("처리중");
            	setTimeout(function(){
            		$.ajax({
                        type: "post",
                        url: "/follow",
                        data: data,
                        dataType: "text",
                        timeout: 5000,
                        error: function () {
                            alertShow("danger", "다시 시도해주세요", 2000);
                            $(obj).html("팔로우");
                        },
                        success: function(response){
                            if (response == "success") {
                            	$(obj).html("팔로잉").data("state", "following").addClass("active");
                                $("#follower_cnt").html(parseInt($("#follower_cnt").html()) + 1);
                            } else if (response == "closed") {
                                alertShow("danger", "팔로우를 받지 않는 사용자입니다", 2000);
                            } else if (response == "role") {
                                alertShow("danger", "로그인이 필요합니다", 2000);
                            } else {
                            	$(obj).html("팔로우");
                                alertShow("danger", "다시 시도해주세요", 2000);
                            }
                        }
                    });
            	},400);
            }else{
            	$(obj).html("처리중");
            	setTimeout(function(){
            		$.ajax({
                        type: "post",
                        url: "/unFollow",
                        data: data,
                        dataType: "text",
                        timeout: 5000,
                        error: function () {
                            alertShow("danger", "다시 시도해주세요", 2000);
                            $(obj).html("팔로잉");
                        },
                        success: function(response){
                            if(response == "fail") {
                                alertShow("danger", "다시 시도해주세요", 2000);
                                $(obj).html("팔로잉");
                            }else{
                            	$(obj).html("팔로우").data("state", "follow").removeClass("active");
                                $("#follower_cnt").html(parseInt($("#follower_cnt").html()) - 1);
                            }
                        }
                    });
            	},500);
            }
        }
    }
    
    $(window).scroll(function () {
    	/* var width = $(window).innerWidth();
        if(width > 1200) {
        	var scrollHeight = $(window).scrollTop();
        	if(scrollHeight > profile_top){
        		$("#profile-info").css({"top":33,"position":"fixed"});
        	}else{
        		$("#profile-info").css({"top":-230,"position":"absolute"});
        	}
        	if(scroll > 210){
        		$("#profile-info").addClass("scroll");
        	}else{
        		$("#profile-info").removeClass("scroll");
        	}
        } */
		if(loading){
        	if($(window).scrollTop() > ($(document).height()-$(window).height()-350)){
        		scroll = true;
        		if(curr_loadingType == "post" && postHasPost){
        			NProgress.set(0.0);
            		postIndex += 20;
        			getMyPost();
        		}else if(curr_loadingType == "following" && followingHasPost){
        			NProgress.set(0.0);
        			followingIndex += 50;
        			getFollowingProfile();
        		}else if(curr_loadingType == "follower" &&  followerHasPost){
        			NProgress.set(0.0);
        			followerIndex += 50;
        			getFollowerProfile();
        		}else if(curr_loadingType == "like" &&  likeHasPost){
        			if(likeHasPost){
        				NProgress.set(0.0);
                		likeIndex += 20;
            			getUserLikePost();
        			}
        		}
        		
       		}
   		}
    });
    
    $(window).resize(function(){
    	var coverImage = $("#coverImage");
    	var coverImageWrapper = $("div.coverImageWrapper");
    	coverImage.css("top", (coverImage.height()-coverImageWrapper.height())*parseInt("${member.coverImage_top}")/100);
    	coverImageWrapper.bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
    		//coverImage.css("top", (coverImage.height()-coverImageWrapper.height())*parseInt("${member.coverImage_top}")/100);
       	});
       	
    });
    
    window.onload = function() {
    	postList = $("#itemList");
    	imagesLoaded("#coverImage", function( instance ) {
    		$("#coverImage").css("top", ($("#coverImage").height()-$("div.coverImageWrapper").height())*parseInt("${member.coverImage_top}")/100);
		});
    	//profile_top = $("#profile-info").offset().top-30;
    	getMyPost();
    	$("#moblie-login-btn").css("right", 40);
        var pfCheck = /^default/i;
        if(pfCheck.test("${member.profileImage}")){
        	$("#hasProfileImage").val("false");
        }else{
        	$("#hasProfileImage").val("true");
        }
        
        $('[data-toggle="tooltip"]').tooltip({
            'placement': 'top',
            'container': 'body',
            'trigger': "hover"
        });
        
        if("${member.website}" != "") {
        	$("#print_website").html("<i class='ion-link' style='color: #494D56; font-size:19px;'></i>&nbsp;<a href='${member.website}' style='color:#808080; font-size:13px;' target='_blank'>${member.website}</a>");
        }
        
        imagesLoaded("#profileImage", function(){
        	if ($("#profileImage").height() <= 170) {
            	if($(window).innerWidth() > 767){
            		$("#profileImage").css("height", 170);
            	}else{
            		$("#profileImage").css({"top":0,"height":"100%"});
            	}
            }
        });
        
        $("#report-type").selectpicker();
        $("#report-reason").selectpicker();
        
        $(".mobile-footer-menu > ul > li:nth(4)").addClass("mf_on");
        if(parseInt("${postCnt}") > 9){
        	//$("#post-cover").show();
        	//loadPostCover();
        }
    }
	
    function report(idx, type){
   		if(type=="comment"){
			$("#report-reason").prev().html("이 댓글을 신고하는 이유가 무엇인가요?");
			$("#report-type").val("comment");
		}else{
			$("#report-reason").prev().html("이 게시물을 신고하는 이유가 무엇인가요?");
			$("#report-type").val("post");
		}
   		$("#report-idx").val(idx);
   		$("#report-modal").modal("show");
   	}
	
    function like(button, post_idx, author_idx, refer_img, refer_url, author_id){
        if (!member_idx) {
            alertShow("danger", "로그인이 필요합니다", 2000);
        } else {
        	var data = "post_idx="+post_idx+"&author_idx="+author_idx+"&refer_img="+refer_img+"&refer_url="+refer_url+"&author_id="+author_id;
        	$(button).html("<img src='/resources/img/default-btn-loading.gif'>");
        	setTimeout(function(){
       			$.ajax({
	                type: "post",
	                url: "/addLike",
	                data: data,
	                dataType: "text",
	                timeout: 5000,
	                error: function () {
	                    alertShow("danger", "다시 시도해주세요", 2000);
	                },
	                success: function (response) {
	                	if (response == "unlike") {
	                    	$(button).html("<i class='fa fa-heart'></i>")
	                    	.parent().parent().parent().children("div.item-info").find("span.like_cnt").html(parseInt($(button).parent().parent().parent().children("div.item-info").find("span.like_cnt").html())-1);
	                    } else if (response == "execute") {
	                    	$(button).html("<i class='fa fa-heart' style='color: #cc2e35;'></i>")
	                    	.parent().parent().parent().children("div.item-info").find("span.like_cnt").html(parseInt($(button).parent().parent().parent().children("div.item-info").find("span.like_cnt").html())+1);
	                    } else {
	                    	$(button).html("<i class='fa fa-heart'></i>");
	                        alert('잘못된 접근입니다');
	                    }
	                }
	            });
        	}, 1000);
        }
    }
    
    function post_share(content, title, image1, url){
    	$("#input_urlCopy").val(location.host+"/p/"+url);
   		$("#google-share").attr("href", "https://plus.google.com/share?url={"+location.host+"/p/"+url+"}");
   		$("#mail-share").attr("href", "mailto:?subject="+title+"&body="+content+"%0D%0AURL : "+location.host+"/p/"+url);
   		$("#share-url").val(location.host+"/p/"+url);
   		$("#share-title").val(title);
   		$("#share-image1").val(location.host+"/resources/upload/post/thumbnail/"+image1);
   		$("#share-content").val(content);
   		var filter = "win16|win32|win64|mac|macintel";
   		if(navigator.platform){
   		    if(filter.indexOf(navigator.platform.toLowerCase())<0){
   		    	$("#kakao-link-btn").show();
   		    }
   		}
   		$("#share-modal").modal("show");
   	}
    
    function fb_share(content, title, url, image1){
   		var content = $("#share-content").val();
   		var url = $("#share-url").val();
   		var obj = {
   			method: "feed",
   			link: url,
   			picture: $("#share-image1").val(),
   			name: $("#share-title").val(),
   			caption: url,
   			description: content
   		};
   		
   		function callback(response){
   			if(response && response.post_id){
   				alert('페이스북에 공유되었습니다');
   				$("#share-modal").modal("hide");
   			}
   		}
   		FB.ui(obj, callback);
   	}
    
    function fb_page_share(content, title, url, image1){
   		var obj = {
   			method: "feed",
   			link: "http://faeple.com/${member.id}",
   			picture: "http://faeple.com/resources/upload/profile/thumbnail/${member.profileImage}",
   			name: "Faeple on ${member.name}",
   			caption: location.href,
   			description: "${fn:replace(member.description, newLineChar, ' ')}"
   		};
   		
   		function callback(response){
   			if(response && response.post_id){
   				alert('페이스북에 공유되었습니다');
   				$("#page-share-modal").modal("hide");
   			}
   		}
   		FB.ui(obj, callback);
   	}
    
   	function twitter_share(){
   		var content = "Faeple on Style : "+ $("#share-url").val();
   		var url = $("#share-url").val();
   		var link = "https://twitter.com/intent/tweet?text="+content+"&url="+url;
   		window.open(link,'트위터로 공유하기','scrollbars=no,toolbar=no,resizable=yes,width=600,height=260');
   	}
	
   	Kakao.Link.createTalkLinkButton({
   		container: '#kakao-link-btn',
   		label: 'Faeple on Style : '+$("#share-title").val(),
   		image: {
   			src: $("#share-image1").val(),
   			width: '300',
   			height: '200'
   		},
   		webButton: {
   			text: 'Faeple.com 이동',
   			url: $("#share-url").val()
   		}
   	});
   	
   	function report_submit(obj){
		$(obj).html("전송중...").attr("disabled", "disabled");
		setTimeout(function(){
			$.ajax({
				type : "post"
			    , url : "/submitReport"
			    , dataType : "text"
			    , data : $("#report-form").serialize()
			    , timeout : 5000
			  	, error : function() {
			  		alertShow("danger", "다시 시도해주세요" ,1500);
			  		$(obj).html("보내기").removeAttr("disabled");
			    }
			    , success : function(response) {
			    	if(response){
			    		alertShow("success", "신고되었습니다" ,1500);
			    	}else{
			    		alertShow("danger", "다시 시도해주세요" ,1500);
			    	}
			    	$("#report-modal").modal("hide");
			    }
			 	, complete: function(){
			 		$(obj).html("보내기").removeAttr("disabled");
			 		$("#report-form")[0].reset();
			 	}
			});
		}, 800);
   	}
   	function loadMessage(){
   		if("${userDto.idx}" != ""){
   			$("#message-modal").modal("show");
   		}else{
   			$("#login-dialog").modal("show");
   		}
   	}
   	
	function sendMessage(){
		if("${userDto.idx}" != ""){
			if($("#reply").val().length != 0){
				var data = $("#message-form").serialize();
				$.ajax({
					type : "post"
	   	   		    , url : "/sendMessage"
	   	   		    , data : data
	   	   		    , dataType : "text"
	   	   		    , timeout : 5000
	   	   		    , error : function() {
	   	   		    	alertShow("danger","다시 시도해 주세요", 2000);
	   	   		    }
	   	   		    , success : function(response) {
	   	   		    	if(response == "execute"){
	   	   		    		$("#message-modal").modal("hide");
	   	   		    		alertShow("success","전송되었습니다", 2000);
	   	   		    		$("#message-form").each(function(){
	   	   		    			this.reset();
	   	   		    		});
	   	   		    	}else{
	   	   		    		alertShow("danger","다시 시도해 주세요", 2000);
	   	   		    	}
	   	   		    }
	   	   		});
			}else{
				alertShow("info","내용을 입력해 주세요", 2000);
			}
   		}else{
   			alertShow("danger","로그인이 필요합니다", 2000);
   		}
   	}
   	
   	function remainMessage(){
   		var size = $("#reply").val().length;
   		if(size > 970){
   			$("#content-length").css("color","#FF0000");
   		}else{
   			$("#content-length").css("color","#ccc");
   		}
   		$("#reply-length").html(size);
   	}
   	
   	
	function loadPostCover(){
		$("#post-cover-wrap").parent().css("background-color", "rgba(0, 0, 0, 0.35)");
		$.ajax({
			type : "post"
		    , url : "/loadPostCover?idx=${member.idx}"
		    , dataType : "json"
		    , timeout : 5000
		    , error : function(){
		    }
		    , success : function(response) {
		    	var html = "";
		    	for(var i=0;i<response.length;i++){
		    		html += "<div class='item' data-index='"+i+"'><a href='/p/"+response[i].url+"' data-target='post'><img src='/resources/upload/post/thumbnail/"+response[i].image+"'></a></div>";
		    	}
		    	$("#post-cover").html(html);
		    	var $cover = $("#post-cover");
		    	imagesLoaded($cover, function(instance) {
    				$cover.masonry({
                		itemSelector: '.item',
                		"gutter": 1,
                		isFitWidth : true,
                		transitionDuration : 0
                	});
    				coverMaxHeight = ($cover.height()-300)*-1;
    				$cover.css("opacity", ".75");
    				postCoverEvent();
    				
           		});
		    }
		});
	}
	var ttop = 1;
	$(document).on("click", "[data-target='history']", function(e){
    	if($(window).innerWidth() > 1040){
    		if(history.pushState) {
    			console.log("history : " +this.href);
    			//$.getJSON(this.href).success(drawPost).error(requestError);
    			//return false;
    		}
    	}
    	return true;
    });
	
	function postCoverEvent(){
		var arrow = 0;
		setInterval(function(){
			if(ttop < coverMaxHeight){
				arrow = 1;
			}else if(ttop == 0){
				arrow = 0;
			}
			if(arrow == 0){
				$("#post-cover-wrap").css("top", --ttop);
			}else{
				$("#post-cover-wrap").css("top", ++ttop);
			}
			//$("#post-cover-wrap").css("top", --ttop);
		}, 150);
	}
	
	function menuToggle(obj, id){
		$("#menu-nav").children("li").each(function(){
			$(this).removeClass("active");
		});
		$(obj).parent().addClass("active");
		if(id=="post"){
			getMyPost();
		}else if(id=="following"){
			getFollowingProfile();
		}else if(id=="follower"){
			getFollowerProfile();
		}else{
			getUserLikePost();
		}
	}
	
	function getFollowingProfile() {
		curr_loadingType = "following";
		$("#itemList").hide();
		$("#followerList").hide();
		$("#likeList").hide();
		$("#followingList").show();
		if($("#followingList").is(":empty") || followingHasPost){
			loading = false;
	        var data = "index=" + followingIndex + "&idx=${member.idx}";
	        $.ajax({
	            type: "get",
	            url: "/getFollowingProfile",
	            data: data,
	            dataType: "json",
	            timeout: 5000,
	            error: function () {
	                $("#followingList").append("<div style='text-align:center;'><p><i class='glyphicon glyphicon-remove' style='font-size:44px; color: #a2a2a2; text-shadow: 1px 1px 0px rgba(201,201,201,1);'></i><h5>서버문제로 팔로잉 목록을 불러올 수 없습니다</h5><button onclick='location.reload(true)' class='btn btn-default btn-sm'>다시시도</button></div>");
	            },
	            success: function (response) {
	                if(response == "" && followingIndex == 0) {
	                	followingHasPost = false;
	                    if(member_idx == "${member.idx}"){
	                        $("#followingList").html("<div style='text-align:center;padding:30px 0;'><i class='ion-person-stalker' style='font-size:50px; color: #7a7a7a;'></i><h4 style='font-weight: bold; color:#777; text-shadow:0 1px 1px rgba(255,255,255,.8);'>회원님이 팔로잉하는 사람들</h4><h5 style='margin-top:25px;color:#999; text-shadow:0 1px 1px rgba(255,255,255,.8);font-weight:bold;'>이곳은 회원님이 팔로잉하는 사람들의 목록이 표시되는 공간입니다.<br>팔로잉 할 사람들을 찾아보고 소통을 나누어 보세요</h5><a href='/all' class='btn btn-mint'>사용자 찾기</a></div>");
	                    }else{
	                        $("#followingList").html("<div style='text-align:center;padding:30px 0;'><p><i class='fa fa-search-minus' style='font-size:45px; color: #7a7a7a;'></i></p><h4 style='font-weight: bold; color:#3A404C;'>팔로잉 없음</h4></div>");
	                    }
	                }else{
	                	if(response.length < 50) {
	                		followingHasPost = false;
	                	}
	                    if (response != "") {
	                        for (var i = 0; i < response.length; i++) {
	                        	var description = response[i].description;
	                        	var html ="<div class='profileBox'>";
								html += "<div class='pb-profile-image' title='"+response[i].name+"' data-toggle='tooltip'><a href='/"+response[i].id+"'><img src='/resources/upload/profile/thumbnail/"+response[i].profileImage+"'></a></div>";
								html += "<div class='pb-profile-name'><span><a href='/"+response[i].id+"'>"+response[i].name+"</a></span><br><span><a href='/"+response[i].id+"' class='pb-profile-id'>@"+response[i].id+"</a></span></div>";
								html += "<div class='pb-profile-info'><span class='pb-followers' title='"+response[i].followerCnt+" 팔로워'><i class='ion-person-stalker'></i><span>"+response[i].followerCnt+"</span></span><span class='pb-post' title='"+response[i].postCnt+" 포스트'><i class='ion-images'></i><span>"+response[i].postCnt+"</span></span></div>";
								if(response[i].description == null || response[i].description == ""){ description = " "; }
								html += "<div class='pb-profile-description'>"+description+"</div>";
								html += "<div style='padding: 10px 5px;'>";
	                            if(response[i].followState == "unFollow"){
	                            	html += "<button type='button' class='btn btn-default btn-sm btn-block' onclick='profile_follow(this, \"follow\", "+response[i].idx+");'>팔로우</button></div>";
	                            }else if(response[i].followState == "following"){
	                            	html += "<button type='button' class='btn btn-success btn-sm btn-block' onclick='profile_follow(this, \"unfollow\", "+response[i].idx+");'><i class='fa fa-check'></i>&nbsp;팔로잉</button></div>";
	                            }else{
	                            	html += "</div>";
	                            }
	                            html += "</div>";
	 			    			$("#followingList").append(html);
	                        }
	                    }else{
	                        $("#followingList").append("<div class='clear'></div>");
	                        $("#lastDataDis").show();
	                        followingHasPost = false;
	                    }
	                }
	                $('[data-toggle="tooltip"]').tooltip({
	                    'placement': 'top',
	                    'container': 'body',
	                    'trigger': "hover"
	                });
	            },
	            beforeSend: function () {
	            	$("#ajax-spinner").show();
	            },
	            complete: function () {
	            	$("#ajax-spinner").hide();
			    	loading = true;
			    	scroll = false;
	            }
	        });
		}
    }
	
	function getFollowerProfile() {
		curr_loadingType = "follower";
		$("#itemList").hide();
		$("#followingList").hide();
		$("#likeList").hide();
		$("#followerList").show();
		if($("#followerList").is(":empty") || followerHasPost){
			loading = false;
	        var data = "index=" + followerIndex + "&idx=${member.idx}";
	        $.ajax({
	            type: "get",
	            url: "/getFollowerProfile",
	            data: data,
	            dataType: "json",
	            timeout: 5000,
	            error: function () {
	                $("#followerList").append("<div style='text-align:center;'><p><i class='glyphicon glyphicon-remove' style='font-size:44px; color: #a2a2a2; text-shadow: 1px 1px 0px rgba(201,201,201,1);'></i><h5>서버문제로 팔로워 목록을 불러올 수 없습니다</h5><button onclick='location.reload(true)' class='btn btn-default btn-sm'>다시시도</button></div>");
	            },
	            success: function (response) {
	                if (response == "" && followerIndex == 0) {
	                	followerHasPost = false;
	                    if (member_idx == "${member.idx}") {
	                        $("#followerList").html("<div style='text-align:center;padding:30px 0;'><i class='ion-person-stalker' style='font-size:50px; color: #7a7a7a;'></i><h4 class='title-h4'>회원님을 팔로우하는 사람들</h4><h5 style='margin-top:25px;color:#999; text-shadow:0 1px 1px rgba(255,255,255,.8);font-weight:bold;'>이곳은 회원님을 팔로우하는 사람들의 목록이 표시되는 공간입니다.<br>게시물을 작성해서, 회원님을 팔로우하는 사람들을 만들어보세요</h5><button type='button' class='btn btn-primary' data-toggle='modal' data-target='#write-dialog' data-backdrop='static'>게시물 작성하기</button></div>");
	                    } else {
	                        $("#followerList").html("<div style='text-align:center;padding:30px 0;'><p><i class='fa fa-search-minus' style='font-size:45px; color: #7a7a7a;'></i></p><h4 class='title-h4'>팔로워 없음</h4></div>");
	                    }
	                } else {
	                	if(response.length < 50) {
	                		followerHasPost = false;
	                	}
	                    if (response != "") {
	                        for (var i = 0; i < response.length; i++) {
	                        	var description = response[i].description;
								var html ="<div class='profileBox'>";
								html += "<div class='pb-profile-image' title='"+response[i].name+"' data-toggle='tooltip'><a href='/"+response[i].id+"'><img src='/resources/upload/profile/thumbnail/"+response[i].profileImage+"'></a></div>";
								html += "<div class='pb-profile-name'><span><a href='/"+response[i].id+"'>"+response[i].name+"</a></span><br><span><a href='/"+response[i].id+"' class='pb-profile-id'>@"+response[i].id+"</a></span></div>";
								html += "<div class='pb-profile-info'><span class='pb-followers' title='"+response[i].followerCnt+" 팔로워'><i class='ion-person-stalker'></i><span>"+response[i].followerCnt+"</span></span><span class='pb-post' title='"+response[i].postCnt+" 포스트'><i class='ion-images'></i><span>"+response[i].postCnt+"</span></span></div>";
								if(response[i].description == null || response[i].description == ""){ description = " "; }
								html += "<div class='pb-profile-description'>"+description+"</div>";
								html += "<div style='padding: 10px 5px;'>";
	                            if(response[i].followState == "unFollow"){
	                            	html += "<button type='button' class='btn btn-default btn-sm btn-block' onclick='profile_follow(this, \"follow\", "+response[i].idx+");'>팔로우</button></div>";
	                            }else if(response[i].followState == "following"){
	                            	html += "<button type='button' class='btn btn-success btn-sm btn-block' onclick='profile_follow(this, \"unfollow\", "+response[i].idx+");'><i class='fa fa-check'></i>&nbsp;팔로잉</button></div>";
	                            }else{
	                            	html += "</div>";
	                            }
	                            html += "</div>";
	 			    			$("#followerList").append(html);
	                        }
	                    }else{
	                        $("#followerList").append("<div class='clearfix'></div>");
	                        $("#lastDataDis").show();
	                        followerHasPost = false;
	                    }
	                }
	                $('[data-toggle="tooltip"]').tooltip({
	                    'placement': 'top',
	                    'container': 'body',
	                    'trigger': "hover"
	                });
	            },
	            beforeSend: function () {
	            	$("#ajax-spinner").show();
	            },
	            complete: function () {
	            	$("#ajax-spinner").hide();
			    	loading = true;
			    	scroll = false;
	            }
	        });
		}
    }
	
	function getUserLikePost() {
		curr_loadingType = "like";
		$("#itemList").hide();
		$("#followingList").hide();
		$("#followerList").hide();
		$("#likeList").show();
    	if($("#likeList").is(":empty") || scroll){
    		loading = false;
            var data = "index=" + likeIndex + "&idx=${member.idx}";
            $.ajax({
                type: "get",
                url: "/getUserLikePost",
                data: data,
                dataType: "json",
                timeout: 5000,
    			error: function () {
    				$("#likeList").append("<div style='text-align:center;'><p><i class='glyphicon glyphicon-remove' style='font-size:44px; color: #a2a2a2; text-shadow: 1px 1px 0px rgba(201,201,201,1);'></i><h5>서버문제로 게시글을 불러올 수 없습니다</h5><button onclick='location.reload(true)' class='btn btn-default btn-sm'>다시시도</button></div>");
                },
                success: function (response) {
                    if(response == "" && likeIndex == 0){
                    	likeHasPost = false;
                        if(member_idx == "${member.idx}"){
                            $("#likeList").html("<div style='text-align:center; padding:30px 0;'><i class='fa fa-heart-o' style='margin-top:10px; font-size:38px; color: #FF4040;'></i><h4 class='title-h4'>회원님이 좋아하는 게시물</h4><h5 style='margin-top:25px;color:#999; text-shadow:0 1px 1px rgba(255,255,255,.8);font-weight:bold;'>이곳은 회원님이 좋아하는 게시물이 표시되는 공간입니다.<br>게시물들을 둘러보고 좋아요를 눌러보세요</h5><a href='/all' class='btn btn-mint'>둘러보기</a></div>");
                        }else{
                            $("#likeList").html("<div style='text-align: center; padding:30px 0;'><p><i class='fa fa-search-minus' style='font-size:45px; color: #7a7a7a;'></i></p><h4 class='title-h4'>좋아하는 포스트 없음</h4></div>");
                        }
                    }else{
                        if(response != ""){
                           	if(response.length < 20){
                           		likeHasPost = false;
                           	}
                           	var html = "";
                            for(var i = 0; i < response.length; i++){
                            	var likeBtnStyle = "";
     			    			if(response[i].likeState == "like"){ likeBtnStyle = "style='color: #cc2e35;'"; }
     			    			/* 
     			    			var comment = "";
     			    			if(response[i].comment_cnt != 0){
     			    				comment += "<div style='width: 93%; margin: 8px auto; border-bottom :1px solid #f3f3f3;'></div><div class='comment-list'>";
     			    				for(var k=0;k<response[i].comment.length;k++){
     			    					comment += "<div class='comment'><div title='"+response[i].comment[k].author+"' class='comment-profile'><a href='/"+response[i].comment[k].member_id+"'><img src='/resources/upload/profile/thumbnail/"+response[i].comment[k].profileImage+"'></a></div><div class='comment-right' title='"+response[i].comment[k].create_date+"'><div class='comment-author'><a href='/"+response[i].comment[k].member_id+"'>"+response[i].comment[k].author+"</a></div><div class='comment-content'>"+parseContent(response[i].comment[k].content).parseEmoji()+"</div></div></div>";
    			    					}
     			    				comment += "</div>";
     			    			} */
     			    			html += "<div class='itembox' data-idx='"+response[i].idx+"'><div class='item'><div class='item-image'><div class='item-function'><button type='button' class='likeBtn' title='좋아요' onclick='like(this,"+response[i].idx+","+response[i].member_idx+",\""+response[i].image1+"\",\""+response[i].url+"\")'><i class='fa fa-heart' "+likeBtnStyle+"></i></button><button type='button' title='공유하기' onclick='post_share(\""+shareParse(response[i].content)+"\", \""+shareParse(response[i].title)+"\", \""+response[i].image1+"\", \""+response[i].url+"\");'><i class='fa fa-share'></i></button></div><a href='/p/"+response[i].url+"' data-target='post' style='display: block;'><img src='/resources/upload/post/thumbnail/"+response[i].image1+"'></a></div><div class='item-profile'><div class='profile-img' data-memidx='"+response[i].member_idx+"'><a href='/"+response[i].member_id+"'><img src='/resources/upload/profile/thumbnail/"+response[i].profileImage+"'></a></div><div class='profile-info'><p class='profile-name'><a href='/"+response[i].member_id+"'>"+response[i].author+"</a></p><p class='profile-time'>"+timeleft(response[i].create_date)+"</p></div></div><div class='item-content'>"+parseContent(response[i].content.parseEmoji())+"</div><div class='item-info' style='padding-left:9px!important;padding-right:9px!important;'><p style='float:left;'><i class='fa fa-heart'></i>&nbsp;<span class='like_cnt'>"+response[i].like_cnt+"</span><i class='fa fa-comment'></i>&nbsp;<span class='comment_cnt'>"+response[i].comment_cnt+"</span></p><p style='float:right; cursor:pointer;' title='신고하기' onclick='report("+response[i].idx+")'><i class='fa fa-flag'></i></p></div><div class='clearfix'></div></div></div>";
                            }
                            var $el = $(html);
                            if(likeIndex == 0){
                            	$el.imagesLoaded(function(){
                            		$("#likeList").append($el).masonry({
        			    				itemSelector : '.itembox',
        			    				"gutter": 15,
        			    				transitionDuration : 0
        			    			});
        		    			});
                            }else{
                            	$el.imagesLoaded(function(){
                            		$("#likeList").append($el).masonry('appended', $el);
        			    		});
                            }
                        }else{
                            //$("#lastDataDis").show();
                            likeHasPost = false;
                        }
                    }
                },
                beforeSend: function () {
                	$("#ajax-spinner").show();
                },
                complete: function () {
                	$("#ajax-spinner").hide();
                	loading = true;
                	scroll = false;
                }
            });
    	}
    }
</script>
<c:if test="${userDto.idx eq member.idx}">
<script src="/resources/js/memberView.js"></script>
</c:if>
<div class="modal" id="post-modal" style="cursor:-webkit-zoom-out;">
	<button type="button" class="close" id="post-modal-close" title="닫기"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	<div style="width:1000px; margin: 25px auto; padding: 0; cursor: default;">
		<div id="post-viewer"></div>
	</div>
</div><!-- /.modal-dialog -->
<div class="modal-backdrop in" id="post-backdrop" style="display: none; filter: alpha(opacity=85); opacity: .85; background-color: #d0d0d0;"></div>
<script type="text/javascript" src="/resources/js/swipe.js"></script>
<script type="text/javascript" src="/resources/js/postModal.js?20150424"></script>
</body>
</html>